import React, { memo, Suspense } from "react";
import { Provider } from "react-redux";
import { renderRoutes } from "react-router-config";
import { HashRouter } from "react-router-dom";

import routes from "@/router";
import store from "./store";

import YYAppHeader from "@/components/app-header";
import YYAppFooter from "@/components/app-footer";
import YYPlayer from "./pages/player";

export default memo(function App() {
  return (
    <Provider store={store}>
      <HashRouter>
        <YYAppHeader />
        <Suspense fallback={<div>Page Loading ...</div>}>{renderRoutes(routes)}</Suspense>
        <YYPlayer />
        <YYAppFooter />
      </HashRouter>
    </Provider>
  );
});
